<template>
    <div class="register">
        <div class="register_topWarp">
                <div class="register_back" >
                    <van-icon class="back_btn"  @click="goLogin()" name="arrow-left" />
                    <span class="register_title">注册</span>
                </div>
        </div>
        <div class="register_main">
            <div class="register_from">
                <van-form>
                    <div class="text"><img src="@/assets/img/my/zhanghao-icon.png" alt=""> 账号 </div>
                    <van-field  input-align="left" placeholder="请输入您的账号" v-model="AccountName" />
                    <br />
                    <div class="text"><img src="@/assets/img/my/mima-icon.png" alt=""> 密码 </div>
                    <van-field  input-align="left" type="password" placeholder="请输入您的密码" v-model="Password" />
                    <div class="text"><img src="@/assets/img/login/xingming-icon.png" alt=""> 姓名 </div>
                    <van-field  input-align="left" placeholder="请输入您的姓名" v-model="IDName" />
                    <div class="text"><img src="@/assets/img/login/youxiang-icon.png" alt=""> 邮箱 </div>
                    <van-field  input-align="left" type="email" placeholder="请输入您的邮箱" v-model="EmailAddress" />
                    <div class="text"><img src="@/assets/img/login/shouji-icon.png" alt=""> 手机 </div>
                    <van-field  input-align="left" type="tel" placeholder="请输入您的手机号" v-model="Mobile" />
                </van-form>
            </div>
            <div class="register_submit">
                <van-button block type="primary" class="btn1" @click="onSubmit"> 立即注册 </van-button>
                <br />
                <!-- <van-button block type="primary" class="btn2" @click="goLogin()"> 已有账号 , 去登录
                </van-button> -->
            </div>
        </div>
        
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify, Icon } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import { useRoute, useRouter } from "vue-router";
import { isPhone, validEmail } from "@/utils/validate";
import CryptoJS from 'crypto-js'
import router from "@/router";
export default {
    setup() {
        const store = useStore(); // 获取对象
        const route = useRoute();
        // const { Code } = route.query;
        const user = reactive({
            // Code: Code,
            AccountName:"",//用户账号
            Password:"",//用户登录密码
            IDName:"",//用户姓名
            EmailAddress:"",//用户邮箱地址
            Mobile:"",//用户手机
            NickName:"",//用户昵称

        });

        // 注册提交
        const onSubmit = async () => {
            if (user.AccountName == '') {
                Notify({ type: 'warning', message: '请输入账号' });
                return false
            }
            if (user.Password == '') {
                Notify({ type: 'warning', message: '请输入登录密码' });
                return false
            }
            if (user.IDName == '') {
                Notify({ type: 'warning', message: '请输入姓名' });
                return false
            }
            if (user.EmailAddress == '') {
                Notify({ type: 'warning', message: '请输入邮箱地址' });
                return false
            }
            if (!validEmail(user.EmailAddress)) {
                // user.EmailAddress = '';
                Notify({ type: 'warning', message: '邮箱格式不正确，请重新输入' });
                return false
            }
            if (user.Mobile == '') {
                Notify({ type: 'warning', message: '请输入手机号码' });
                return false
            }
            if (!isPhone(user.Mobile)) {
                // user.Mobile = '';
                Notify({ type: 'warning', message: '手机号码不正确，请重新输入' });
                return false
            }
           
            // const toast = Toast.loading({
            //     duration: 0,
            //     forbidClick: true,
            //     message: '用户注册中...',
            // });
            const toast = Toast.loading({
                    message: '用户注册中...',
                    forbidClick: true
                });
            user.Password=CryptoJS.MD5(user.Password).toString();
            // 调用action的注册方法
            store.dispatch("CreateUser", user).then(() => {
                toast.clear()
                if(res.success){
                    router.push({ path: "/Home" });
                }
                
                // if (window.indexOfApp == true) {
                //     router.push({ path: "/home" });
                // } else {
                //     if (Code) {
                //         router.push({ path: "/download" });
                //     } else {
                //         router.push({ path: "/login" });
                //     }
                // }
            }).catch(() => {
                toast.clear()
            });
        };
        // 跳转登录
        const goLogin = () => {
            router.push({ path: "/login" });
        };
        return {
            ...toRefs(user),
            onSubmit,
            goLogin,

        };
    },
};
</script>

<style scoped></style>